<template>
    <div class="bill-wrap">
      <van-popup v-model="is_show" :close-on-click-overlay="false" class="zltlPop-main">
        <div class="zltlPop_dz">
          <div class="zltl_content">
            <van-radio-group 
              checked-color="#F20B22"
              v-model="checkValue"
            >
              <van-radio
                label-position="left"
                :name="1">
                <div class="wrap-item">
                  <span class="text">个人用户</span>
                  <span class="img">
                    <img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/DZ/zltl/grkh.png"
                        alt="">
                  </span>
                </div>
              </van-radio>
            </van-radio-group>
            <van-radio-group 
              checked-color="#F20B22"
              v-model="checkValue"
              direction="vertical">
              <van-radio
                label-position="left"
                :name="2">
                <div class="wrap-item">
                  <span class="text">企业用户</span>
                  <span class="img">
                    <img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/DZ/zltl/qykh.png"
                        alt="">
                  </span>
                </div>
              </van-radio>
            </van-radio-group>
          </div>
          <van-button class="submit_btn" @click="closePanel">选择好了</van-button>
          <div class="close" v-if="showClose">
            <img src="https://img.wifenxiao.com/h5-wfx/images/DZ/zhile/close.png" @click="close()">
          </div>
        </div>
      </van-popup>
    </div>
</template>

<script>
import Vue from 'vue'
import { RadioGroup, Radio, Button } from 'vant'
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Button)
import { selectMemberType } from '@/api/dz/dzSelectMemberType'
export default {
  name: 'index',
  props: {
    checkValue: {
      type: Number,
      default: 0
    },
    showClose: {
      type: Boolean,
      default: true
    },
    isDefault: {
      type: Boolean,
      default: false //关闭时是否默认选中个人
    }
  },
  data() {
    return {
      is_show: true
    }
  },
  methods: {
    closePanel() {
      if (!this.checkValue) {
        this.$Error('请选择分账类型')
        return false
      }
      this.$loadingWrap.show()
      selectMemberType({ member_type: this.checkValue }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('选择成功')
          this.is_show = false
          this.$emit('select')
        } else {
          this.$Error(res.msg)
        }
      })
    },
    close() {
      if (this.isDefault) {
        this.$loadingWrap.show()
        selectMemberType({ member_type: 1 }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.is_show = false
            this.$emit('select')
          } else {
            this.$Error(res.msg)
          }
        })
      } else {
        this.is_show = false
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="scss">
  .bill-wrap{
    .zltlPop-main{
      background: transparent;
    }
    .zltlPop_dz{
      .zltl_content {
        box-sizing: border-box;
        padding: 0 36px;
        width: 100vw;
        // height: 360px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 100px;
        .wrap-item {
          line-height: 90px;
          font-weight: 500;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: 50px;
          .text {
            font-size: 35px;
            font-weight: 600;
            color: #333;
          }
          img {
            width: 128px;
            height: 128px;
          }
        }
      }
      .van-radio__icon {
        .van-icon {
          width: 40px;
          height: 40px;
          font-size: 30px;
        }
      }
    }
    .van-radio {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    .van-radio__label.van-radio__label--left {
      width: 100%;
      margin-right: 0;
    }
    .van-radio-group {
      background: white;
      width: 316px;
      height: 380px;
      border-radius: 12px;
    }
    .submit_btn {
      width: 700px;
      height: 90px;
      background: rgba(246,36,48,1);
      border-radius: 46px;
      font-size: 32px;
      font-weight: 500;
      color: rgba(255,255,255,1);
      text-align: center;
      line-height: 90px;
      margin-left: 25px;
    }
    .close {
      text-align: center;
      margin-top: 70px;
      img {
        width: 70px;
      }
    }
  }

</style>
